import React from "react";
import { Form, Input, Select } from "antd";
// emotion的行内样式会报错问答区无法解答，暂时以react的行内样式为主
// import {jsx} from "@emotion/react"

/*
 * 定义参数的类型
 */
export interface User {
  id: string;
  name: string;
  token: string;
}

interface SearchPanelProps {
  users: User[];
  param: {
    name: string;
    personId: string;
  };
  setParam: (param: SearchPanelProps["param"]) => void;
}

export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {
  // function handleSelect(e) {
  //     setParam({
  //         ...param,
  //         personId: e.target.value
  //     })
  // }

  return (
    <Form style={{ marginBottom: "2rem" }} layout={"inline"}>
      <Form.Item>
        {/*setParam({Object.assign({}, param, {name: evt.target.value)})*/}
        <Input
          placeholder={"项目名"}
          type="text"
          value={param.name}
          onChange={(evt) => {
            setParam({
              ...param,
              name: evt.target.value,
            });
          }}
        />
      </Form.Item>
      <Form.Item>
        <Select
          value={param.personId}
          onChange={(value) => {
            setParam({
              ...param,
              personId: value,
            });
          }}
        >
          {/*<select value={param.personId} onChange={handleSelect}>*/}
          <Select.Option value={""}>负责人</Select.Option>
          {users.map((user) => (
            <Select.Option key={user.id} value={user.id}>
              {user.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
};
